<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>socket</title>
</head>
<body>
<div>
    <input id="msg"/>
    <button id="send">发送</button>
</div>
<div id="list">

</div>
<script src="http://itphy.com/jquery/jquery.js"></script>
<script>
    var $path="localhost:9999"
    function getAsyncFunQueue() {
        return {
            funList: [],
            state: false,
            execute: null,
            add: function (fun, params) {
                this.funList.push({funName: fun, paramValue: params})
            },
            start: function () {
                const obj = this;
                if (obj.execute != null) {
                    return;
                }
                obj.execute = setInterval(function () {
                    if (obj.funList.length > 0) {
                        if (!obj.state) {
                            obj.state = true;
                            let item = obj.funList.shift();
                            if (typeof (item.funName) == "function") {
                                item.funName(item.paramValue);
                            }
                        }
                    } else {
                        clearInterval(obj.execute);
                        obj.execute = null;
                    }
                }, 200)
            },
            close: function () {
                this.state = false;
            }
        }
    }
    function commonAjax(ajaxParams, params, beforeFunction, callBackFunction, finishFunction) {
        $.ajax({
            type: ajaxParams.type,
            url: ajaxParams.url,
            dataType: ajaxParams.dataType ? ajaxParams.dataType : "json",
            contentType: ajaxParams.contentType ? "application/json;charset=utf-8" : "application/x-www-form-urlencoded",
            async: ajaxParams.async ? ajaxParams.async : true,
            headers: ajaxParams.headers,
            data: params,
            beforeSend: function (request) {
                if (typeof (beforeFunction) == 'function') {
                    beforeFunction(request);
                }
            },
            success: function (data) {
                if (typeof (callBackFunction) == 'function') {
                    var html = callBackFunction(data);
                }
                if (typeof (finishFunction) == 'function') {
                    finishFunction();
                }
            }
        });
    }
    var sock = null;
    var wsuri = "ws://"+$path+"/demo/websocket";
</script>
<script>
    $(function () {
        var queue = getAsyncFunQueue();
        queue.add(first)
        queue.start();
        if ('WebSocket' in window) {
            sock = new WebSocket(wsuri);
        } else {
            alert('Not support websocket')
        }
        sock.onopen = function () {
            console.log("connected to " + wsuri);
        }
        sock.onclose = function (e) {
            console.log("connection closed (" + e.code + ")");
        }
        sock.onmessage = function (e) {
            queue.add(load, e.data);
            queue.start();
        }
        $("#send").click(function (){
            send($("#msg").val())
        })
        $("#msg").on("keydown",function (){
            send($("#msg").val())
        })
        function first() {
            commonAjax({
                url: "/allMsg",
                type:"GET"
            }, null, null, data => {
                if (data.code != 500) {
                    $(data.data).each((i, t) => {
                        $("#list").append("<p>" + t + "</p>")
                    })
                }
                queue.close();
            })
        };
        function send(msg) {
            sock.send(msg);
        };
        function load(t) {
            $("#list").append("<p>" + t + "</p>")
            queue.close();
        };
    })
</script>
</body>
</html>
